<template>
  <view>
    <home v-if="PageCur=='home'"></home>
    <message v-if="PageCur=='message'"></message>
    <order v-if="PageCur=='order'"></order>
    <my v-if="PageCur=='my'"></my>
    <view class="cu-bar tabbar bg-white foot">
      <!-- 首页 -->
      <view class="action" :class="PageCur=='home'?'text-green':'text-gray'" data-cur="home" @click="NavChange">
        <view class="cuIcon-homefill"></view> 首页
      </view>
      <!-- 分类 -->
<!--     <view class="action" :class="PageCur=='message'?'text-green':'text-gray'" data-cur="message" @click="NavChange">
        <view class="cuIcon-message"></view> 消息
      </view> -->
      <view class="action" :class="PageCur=='order'?'text-green':'text-gray'" data-cur="order" @click="NavChange">
        <view class="cuIcon-list">
          <view class="cu-tag badge" v-show="orderNum>0">{{orderNum}}</view>
        </view>订单
      </view>
      <view class="action" :class="PageCur=='my'?'text-green':'text-gray'" data-cur="my" @click="NavChange">
        <view class="cuIcon-my">
          <view class="cu-tag badge"></view>
        </view>我的
      </view>
    </view>
  </view>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: "tabbar",
    data() {
      return {
        PageCur: 'home',
        
      };
    },
    methods: {
      NavChange: function(e) { 
        this.PageCur = e.currentTarget.dataset.cur
      }
    },
    computed:{
      ...mapState('m_user', ['orderList']),
      orderNum(){
        return this.orderList.length;
      }
    }
  }
</script>

<style lang="scss">

</style>